<template>
  <div class="order-item-container">
    <div class="order-item-header">
      <el-text>订单号：{{ orderNo }}</el-text>
      <el-text>{{ date }}</el-text>
    </div>
    <el-divider />
    <div class="order-item-message">
      <img class="goods-cover" :src="goodsCover" alt="" @click="detailPage(goodNo)" />
      <div style="clear: both;overflow: hidden">
        <el-text class="goods-name" @click="detailPage(goodNo)">{{ goodsName }}</el-text>
        <div style="clear: both;overflow: hidden">
          <el-button style="display: block;float: right" size="small">发送</el-button>
        </div>
      </div>
    </div>
    <el-divider />
    <div class="order-footer-container">
      <span>订单金额: <span class="amount">{{ amount }}</span></span>
      <el-tag class="ml-2" :type="tagType">{{ tagContent }}</el-tag>
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
/**
 * 接收OrderList.vue传递的订单信息
 */
const props = defineProps({
  goodNo: {
    type: Number
  },

  orderNo: {
    type: String,
  },
  date: {
    type: String
  },
  goodsCover: {
    type: String
  },
  goodsName: {
    type: String,
  },
  amount: {
    type: Number
  },
  finish: {
    type: Boolean
  }
})
const tagContent = computed(() => props.finish ? "已完成" : "未完成");
const tagType = computed(() => props.finish ? "danger" : "info");
const router = useRouter();

/**
 * 携带商品id跳转详情页测试
 * @param {number} id 
 */
const detailPage = (id) => {
  console.log(id);
  router.push({
    name: 'text',
    query: {
      id: id

    }
  });
}

</script>
<style scoped>
.order-item-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

:deep(.el-divider) {
  margin: 4px 0;
}

.el-text {
  font-size: 10px;
}

.goods-cover {
  width: 100px;
  height: 100px;
  margin-right: 8px;
}

.order-item-message {
  display: flex;
  padding: 8px 8px 8px 0;
  cursor: pointer;
}

.amount {
  color: #F24847;
}

.order-footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-item-container {
  background-color: white;
  margin: 8px;
}</style>
